<template>
  <div class="AscendingIndex_container">
    <div class="banner"></div>
    <div class="ban"></div>
    <div class="title_box">
      <div class="left">
        <div class="huanying">欢迎使用</div>
        <div class="jizhang">便捷记账系统</div>
      </div>
      <div class="right" @click="goAddEdit('add')">
        <van-icon class="icon" name="plus" />
      </div>
    </div>
    <div class="card">
      <div class="card_box">
        <div class="sum">
          <span>总流水</span>
          <div>￥{{ shujv.total }}</div>
        </div>
        <div class="type" @click="show = true">
          <span>{{ time }}</span>
        </div>
      </div>
      <div class="d">
        <div>
          <span>收入<van-icon name="down" /></span>
          <div>￥{{ shujv.income }}</div>
        </div>
        <div>
          <span>支出 <van-icon name="upgrade" /></span>
          <div>￥{{ shujv.expenses }}</div>
        </div>
      </div>
    </div>
    <div class="title">账单列表</div>
    <div class="list">
      <div class="item" v-for="item, index in data" :key="index" @click="goAddEdit('edit', item)">
        <div class="avavar"><van-icon name="balance-o" /></div>
        <div class="info">
          <div class="info_title">{{ item.bill_name }}</div>
          <div class="info_time">{{ item.time }}</div>
        </div>
        <div class="price">{{ item.price }}</div>
      </div>
    </div>

    <van-popup round v-model="show" get-container="body" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker cancel-button-text="清空" @cancel="cancel" @confirm="confirm" v-model="currentDate" type="date"
        title="选择日期" :formatter="formatter" />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getBillList, getAllBillList } from '@/api'
export default {
  name: 'AscendingIndex',
  components: {},
  props: {},
  data() {
    return {
      time: '时间选择',
      show: false,
      currentDate: '',
      data: [],
      shujv: {}
    }
  },
  computed: {

  },
  watch: {},
  created() { },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      try {
        const res = await getAllBillList(this.$store.getters.userInfo.id)
        this.data = res.data
      } catch (error) {

      }
    },

    // 收入支出
    async getShuju() {
      try {

      } catch (error) {

      }
    },
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    formatter(type, val) {
      if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      }
      return val
    },
    goAddEdit(type, row) {
      if (type === 'add') {
        this.$router.push({
          path: '/addEditAscending',
          query: { title: '添加账单' }
        })
      } else if (type === 'edit') {
        this.$router.push({
          path: '/addEditAscending',
          query: { title: '编辑账单', data: row }
        })
      }
    },
    async confirm() {
      this.time = dayjs(this.currentDate).format('YYYY-MM-DD')
      const res = await getBillList({
        user_id: this.$store.getters.userInfo.id,
        time: dayjs(this.currentDate).format('YYYY-MM-DD')
      })
      this.data = res.data
      this.show = false
    },
    cancel() {
      this.show = false
      this.time = '时间选择'
      this.getData()
    }
  }
}
</script>
<style scoped lang='less'>
.AscendingIndex_container {
  height: 100vh;

  .banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    height: 250px;
  }

  .banner::after {
    height: 250px;
    content: '';
    width: 200%;
    position: absolute;
    left: -50%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background-image: url('../../assets/image/WechatIMG196.jpg');
    background-size: cover;
  }

  .ban {
    height: 80px;
  }

  .title_box {
    width: 80%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 20px;
    font-size: 18px;
    font-weight: 700;

    .huanying {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .right {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #438883;
      text-align: center;
      line-height: 60px;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
      /* 添加阴影效果 */
    }
  }

  .card {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background-color: #2F7E79;
    border-radius: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;

    .card_box {
      display: flex;
      justify-content: space-between;

      .sum {
        color: #fff;
        font-weight: 700;

        span {
          font-size: 16px;
          margin-left: 5px;
        }

        div {
          font-size: 30px;
        }
      }

      .type {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #fff;

        span {
          background-color: #438883;
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
          padding: 6px 20px;
        }
      }
    }
  }

  .d {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: #fff;
    font-weight: 700;

    span {
      margin-left: 4px;
      font-size: 14px;
    }

    div {
      font-size: 18px;
    }
  }

  .title {
    height: 40px;
    padding: 0 20px;
  }

  .list::-webkit-scrollbar {
    display: none;
  }

  .list {
    -ms-overflow-style: none;
  }

  .list {
    height: calc(100vh - 390px);
    width: 90%;
    margin: 0 auto;
    overflow: auto;
    scrollbar-width: none;

    .item {
      display: flex;
      height: 50px;
      width: 100%;
      align-items: center;
      margin-bottom: 15px;
      position: relative;

      .avavar {
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 40px;
        background-color: #F0F7F5;
        // margin-left: 20px;
        border-radius: 5px;
        color: #AAACAC;
        font-size: 25px
      }

      .info {
        margin-left: 15px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .info_title {
        font-size: 16px;
        font-weight: 700
      }

      .info_time {
        font-size: 12px;
        color: #AAACAC;
      }

      .price {
        position: absolute;
        font-weight: 700;
        font-size: 18px;
        right: 10px;
      }
    }

    .item:last-child {
      margin-bottom: 10%;
    }
  }
}
</style>
